<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据翻译</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <textarea style="height: 500px" id="oldData" name="oldData" class="layui-textarea" placeholder="源数据"></textarea>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <textarea style="height: 500px" id="change" name="change" class="layui-textarea" placeholder="数据转换"></textarea>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md3">
            <textarea style="height: 500px" readonly id="bandingData" name="bandingData" class="layui-textarea" placeholder="数据转换所需数据"></textarea>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md3">
            <textarea style="height: 500px" id="newData" name="newData" class="layui-textarea" placeholder="转换后数据"></textarea>
        </div>
        <input type="hidden" id="keyValuePair" name="keyValuePair">
    </div>
    <div style="margin-left: 41%">
        <button id="test" class="layui-btn layui-btn-normal layui-btn-sm" >测试</button>
        <button id="save" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-left: 200px;" lay-event="returnDataSend">保存</button>
    </div>
</div>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/base.js" charset="utf-8"></script>
<script src="../js/common.js" charset="utf-8"></script>
<script>
    layui.use(['form','jquery','table'], function () {
        var form = layui.form, layer = layui.layer, table = layui.table;
        $(function () {
            $('#oldData').bind('input propertychange','textarea',function(e){
                isJSON(e.target.value,$('#oldData'));
            });
            $("#test").on('click', function () {
                var data = {};
                data.old_data = $("#oldData").val();
                data.change_data = $("#change").val();
                data.key_value_pair = $("#keyValuePair").val();
                test(data);
            })
            $("#save").on('click', function () {
                var data = {};
                data.old_data = $("#oldData").val();
                data.change_data = $("#change").val();
                data.key_value_pair = $("#keyValuePair").val();
                save(data);
            })
            $("#bandingData").on('click', function () {
                var options = {
                    htmlUrl: "../translater/key_value_pair.html",
                    title: "追加翻译数据",
                    width: 1000,
                    height: 600,
                    maxmin: true,
                    canResize: true
                };
                createWindow(options, this, retClassData);
            })
        });
    });
    var retClassData = function(win){
        var paramData = win();
        var content_text="";
        var key_value_pair_id=[];
        for(var i =0;i<paramData.length;i++){
            let paramDatum = paramData[i];
            let id = paramDatum["id"];
            let key_data = paramDatum["key_data"];
            let value_data = paramDatum["value_data"];
            content_text+="[键："+key_data+"，值："+value_data+"]"+"\n";
            key_value_pair_id.push(id);
        }
        $("#keyValuePair").val(key_value_pair_id.toString());
        document.getElementById('bandingData').innerHTML = "";
        document.getElementById('bandingData').innerHTML = content_text;
    };
    var test= function (data) {
        $.ajax({
            type:'POST',	//请求的类型,GET、POST等
            url:window.reqPath("translater/test"),	//向服务器请求的地址。
            dataType:'JSON',	//预期服务器响应类型
            data:JSON.stringify(data),
            contentType:'application/json',	//向服务器发送内容的类型，默认值是：application/x-www-form-urlencoded
            cache: false,
            success:function(result,status,XMLHttpRequest){		//请求成功是执行的函数,result：服务器返回的数据，    status：服务器返回的状态，
                document.getElementById('newData').innerHTML = "";
                document.getElementById('newData').innerHTML = result.data;
            },
            error:function(xhr,status,error){	//请求失败是执行的函数

            },
            complete:function(xhr,status){
                //不管请求失败还是请求成功，都执行的函数
            }
        })
    }
    var save= function (data) {
        $.ajax({
            type:'POST',	//请求的类型,GET、POST等
            url:window.reqPath("translater/save"),	//向服务器请求的地址。
            contentType:'application/json',	//向服务器发送内容的类型，默认值是：application/x-www-form-urlencoded
            dataType:'JSON',	//预期服务器响应类型
            data:JSON.stringify(data),
            success:function(result,status,XMLHttpRequest){		//请求成功是执行的函数,result：服务器返回的数据，    status：服务器返回的状态，
                if(result.success){
                    layer.msg("成功");
                }
            },
            error:function(xhr,status,error){	//请求失败是执行的函数

            },
            complete:function(xhr,status){
                //不管请求失败还是请求成功，都执行的函数
            }
        })
    }
    //生成随机数 避免打开多个页面 发生问题
    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }
    function isJSON(str,_this) {
        if (typeof str == 'string') {
            try {
                var obj=JSON.parse(str);
                if(typeof obj == 'object' && obj ){
                    flag = true;
                    return true;
                }else{
                    layer.tips('不是json字符串', _this);
                    flag = false;
                    return false;
                }
            } catch(e) {
                layer.tips('不是json字符串', _this);
                flag = false;
                return false;
            }
        }
    }
</script>
</body>
</html>